<template>
  <div class="maintenance-sel-person">
    <q-input v-model="name"
             dense
             clickable
             disable
             :placeholder="`请选择${label}`"
             :rules="[ val => !(val === '' && required) || `请选择${label}`]"
             @click.native="showSelectPerson"
             outlined
             class="cursor-pointer">
      <template v-slot:before>
        <label class="text-right name label-width font-size-16 text-black" v-if="label">
          <span class="text-red" v-show="required">*</span><span>{{label}}:</span>
        </label>
      </template>
    </q-input>
    <PeopleSelect ref="people" :title="title" @selectUser="selectUser" :perData="perData"/>
  </div>
</template>

<script>
import PeopleSelect from './people'
import _ from 'lodash'
export default {
  name: 'maintenance-sel-person',
  components: { PeopleSelect },
  props: {
    person: {
      default: ''
    },
    label: {
      default: ''
    },
    required: {
      default: false
    },
    title: {
      default: '',
      required: true
    },
    userList: Object
  },
  data () {
    return {
      name: '',
      perData: []
    }
  },
  created () {
    this.name = this.person
    this.initUser()
  },
  methods: {
    initUser () {
      this.perData = this.userList?.assignedOperatorIds.reduce((arr, v, index) => {
        arr.push({
          name: this.userList?.assignedOperatorNameList[index],
          id: v
        })
        return arr
      }, [])
    },
    showSelectPerson () {
      this.$refs.people.showDialog()
    },
    selectUser (data) {
      this.perData = data
      console.log(this.perData)
      this.name = data ? _.map(data, 'name').join() : ''
      this.$emit('change', data)
    }
  }
}
</script>

<style scoped lang="stylus">
  .maintenance-sel-person{
    .cursor-pointer{
      >>>.q-field__inner{
        cursor: pointer
      }
    }

    >>>.q-field__control-container{
      opacity 1 !important
    }
  }
</style>
